<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8" %>
<%@ taglib prefix="s" uri="/struts-tags" %>

<link rel="stylesheet" media="screen" href="css/docs.css" />
<link rel="stylesheet" media="screen" href="lib/jqplot/jquery.jqplot.min.css" />
<link rel="stylesheet" media="screen" href="lib/datatables/css/vpad.css" />

<script type="text/javascript" src="${ctx}/js/global_util.js"></script>

<h1 class="page-title">现金报支单 - 添加</h1>

<div class="container_12 clearfix leading">
    <div class="clear"></div>
    <h5>流水号：<strong id="financial_serial_number"></strong></h5>
    <div class="portlet leading">
        <header>
            <h6 style="margin-bottom:0px"><a href="#"><span style="background:url(${ctx}/images/img/script_link.png)" class="icon">&nbsp;</span>报支类别 </a>
            <select id="financial_type" style="opacity: 0;">
                <option>差旅费</option>
                <option>广告费</option>
                <option>培训费</option>
                <option>活动费</option>
                <option>采购费</option>
                <option>其他</option>
            </select>
            </h6>
        </header>

        <section class="tabs side">
            <ul class="clearfix" style="width:150px" id="tab_title">
                <li style="width:150px" onclick="tab_onclick(this)" id="tab_li_first">
                    <a href="#"><span style="background:url(${ctx}/images/img/table_add.png)" class="icon">&nbsp;</span><span class="tab_title_span">第1项</span></a>
                </li>
            </ul>
            <section style="margin-left:150px">
                <table class="display" id="example" style="clear:none">
                    <thead>
                    </thead>
                    <tbody>
                    <tr class="gradeA">
                        <td>项目明细</td>
                        <td><strong> <input name="username3" type="text" style="width:100px" id="detail_info"/>
                        </strong></td>
                        <td>金额</td>
                        <td><strong> <input name="username2" type="text" style="width:100px" id="detail_money"/> 元 </strong></td>
                    </tr>
                    <tr class="gradeA">
                        <td>经办人</td>
                        <td><strong> <input name="username4" type="text" style="width:100px" id="detail_operator"/> </strong></td>
                        <td>审核金额</td>
                        <td><strong> <input name="username7" type="text" style="width:100px" id="detail_audit_money"/> 元</strong></td>
                    </tr>
                    </tbody>
                </table>

                <section class="clearfix">
                    <div class="tabs side grid_12 leading">
                        <div class="clear"></div>
                        <div class="grid_12">
                            <div class="form-action clearfix">
                                <p>
                                    <a class="button" href="javascript:void(0)" onclick="addDetail()" style="display: none;" id="modify_btn"><span style="background:url(${ctx}/images/img/page_edit.png)" class="icon">&nbsp;</span>修改项目</a>
                                    <a class="button" href="javascript:void(0)" onclick="deleteDetail()" style="display: none;" id="delete_btn"><span style="background:url(${ctx}/images/img/cancel.png)" class="icon">&nbsp;</span>删除项目</a>
                                </p>
                            </div>
                        </div>
                    </div>
                </section>
                <section class="clearfix"></section>
                <section class="clearfix"></section>
                <section class="clearfix"></section>
            </section>
            <div class="clear"></div>
            <div class="container_12 clearfix leading" style=" padding-left:20px">
                <div class="form-action clearfix" style="margin-left:115px">
                    <p id="add_detail_btn">
                        <a class="button" href="javascript:void(0)" onclick="addDetail()"><span style="background:url(${ctx}/images/img/add.png)" class="icon">&nbsp;</span>添加项目</a></p>
                    <p><strong>合计：</strong> <input name="username" id="total_money_input" type="text" style="width:120px"/>
                        <strong>金额大写：</strong> <input name="username" id="total_money_rmb_input" type="text" style="width:200px"/>
                    </p>
                </div>
            </div>
        </section>
    </div>
    <div class="clear"></div>
    <div class="tabs side grid_12 leading">
        <div class="clear"></div>
    </div>
</div>

<div class="clear"></div>
<div class="container_12 clearfix leading" style=" padding-left:20px">
    <div class="form-action clearfix">
        <p>
            <a class="button" href="javascript:void(0)" onclick="doAddDetails()"><span style="background:url(${ctx}/images/img/page_edit.png)" class="icon">&nbsp;</span>确定提交</a>
            <a class="button" href="#${userType==1?"sign" : "public"}/financial-report-form.xhtml"><span style="background:url(${ctx}/images/img/arrow_undo.png)" class="icon">&nbsp;</span>返回</a></p>
    </div>
</div>

<input type="hidden" id="current_tab_id" value="tab_li_first">
<form name="data_form" id="data_form">
<div id="detail_list"> </div>
<input id="total_money_hidden" name="financialReportForm.amount" value="" type="hidden">
<input id="total_money_rmb_hidden" name="financialReportForm.amountRmb" value="" type="hidden">
<input id="financial_type_hidden" name="financialReportForm.type" value="" type="hidden">
<input id="financial_serial_number_hidden" name="financialReportForm.serialNumber" value="" type="hidden">
</form>

<script type="text/javascript">
    $(function(){
        var serial = createSerialNumber();
        $("#financial_serial_number").html(serial);
        $("#financial_serial_number_hidden").val(serial);
    });
    //添加Detail
    function addDetail(){
        var detail_info = $("#detail_info").val();
        var detail_money = $("#detail_money").val();
        var detail_operator = $("#detail_operator").val();
        var detail_audit_money = $("#detail_audit_money").val();
        if(checkNull(detail_info)){
            alert("请填写项目明细");
            return;
        }
        if(checkNull(detail_money) || isNaN(detail_money)){
            alert("请正确填写金额");
            return;
        }
        if(checkNull(detail_operator)){
            alert("请填写经办人");
            return;
        }
        if(checkNull(detail_audit_money) || isNaN(detail_audit_money)){
            alert("请正确填写审核金额");
            return;
        }

        var tab_id = $("#current_tab_id").val();
        var detail = $("#detail_"+tab_id);
        var isEdit = (detail != null && detail.length > 0);
        if(isEdit){
            //修改数据
            var detailInfo = $(detail).find("input[type='hidden']");
            $(detailInfo[0]).val(detail_info);
            $(detailInfo[1]).val(detail_money);
            $(detailInfo[2]).val(detail_operator);
            $(detailInfo[3]).val(detail_audit_money);
        }else{
            //添加数据
            //var tab_id = $("#tab_title").find("li:last").attr("id");
            var temp = '<div id="detail_'+tab_id+'">';
            temp += '<input type="hidden" value="'+detail_info+'" name="detail_info_input">';
            temp += '<input type="hidden" value="'+detail_money+'" name="detail_money_input">';
            temp += '<input type="hidden" value="'+detail_operator+'" name="detail_operator_input">';
            temp += '<input type="hidden" value="'+detail_audit_money+'" name="detail_audit_money_input">';
            temp += "</div>"
            $("#detail_list").append(temp);

            //添加tab
            var obj = '' +
                    '<li style="width:150px" onclick="tab_onclick(this)" id="tab_li_'+(new Date().getTime())+'">'+
                        '<a href="#"><span style="background:url(${ctx}/images/img/table_add.png)" class="icon">&nbsp;</span><span class="tab_title_span">第'+($("#tab_title li").length+1)+'项</span></a>'+
                    '</li>'
            $("#tab_title").append(obj)
        }

        $("#detail_info").val("");
        $("#detail_money").val("");
        $("#detail_operator").val("");
        $("#detail_audit_money").val("");
        tab_onclick($("#tab_title").find("li:last"))

        resetTotal();
    }

    //删除Detail
    function deleteDetail(){
        if(confirm("确定要删除该项数据吗？")){
            var tab_id = $("#current_tab_id").val();
            $("#detail_"+tab_id).remove();
            $("#"+tab_id).remove();

            $("#detail_info").val("");
            $("#detail_money").val("");
            $("#detail_operator").val("");
            $("#detail_audit_money").val("");
            tab_onclick($("#tab_title").find("li:last"))
            resetTotal();
            resetTobIndex();
        }
    }

    //点击tab
    function tab_onclick(obj){
        $("#tab_title").find("a").removeClass("current");
        $(obj).find("a").addClass("current")

        var tab_id = $(obj).attr("id");
        $("#current_tab_id").val(tab_id);
        var detail = $("#detail_"+tab_id);
        if(detail != null && detail.length > 0){
            var detailInfo = $(detail).find("input[type='hidden']");
            $("#detail_info").val(detailInfo[0].value);
            $("#detail_money").val(detailInfo[1].value);
            $("#detail_operator").val(detailInfo[2].value);
            $("#detail_audit_money").val(detailInfo[3].value);
            $("#modify_btn").show();
            $("#delete_btn").show();
            $("#add_detail_btn").hide();
        }else{
            $("#detail_info").val("");
            $("#detail_money").val("");
            $("#detail_operator").val("");
            $("#detail_audit_money").val("");
            $("#modify_btn").hide();
            $("#delete_btn").hide();
            $("#add_detail_btn").show();
        }
    }

    //调整tab顺序
    function resetTobIndex(){
        var tabTitles = $("#tab_title").find(".tab_title_span");
        for(var index = 0; index < tabTitles.length; index++){
            $(tabTitles[index]).html("第"+(index+1)+"项");
        }
    }

    //征调设置总额
    function resetTotal(){
        var total = computeMoney();
        $("#total_money_input").val(total);
        $("#total_money_rmb_input").val(formatMoney(total));
    }

    //计算总额
    function computeMoney(){
        var total = 0;
        $("#detail_list").find("input[name='detail_audit_money_input']").each(function(){
            total += parseFloat(this.value)
        });
        return total;
    }

    //提交表单
    function doAddDetails(){
        if($("#detail_list").children().length == 0){
            alert("没有数据，无法提交")
            return;
        }
        var total = computeMoney();
        $("#total_money_hidden").val(total);
        $("#total_money_rmb_hidden").val(formatMoney(total));
        $("#financial_type_hidden").val($("#financial_type").val());

        var data  = $("#data_form").serialize();
        var url = "${ctx}/${userType==1?"sign" : "public"}/financial-report-form-save.xhtml";
        $.ajax(url, {
            type: "POST",
            //data: organization,
            data: data,
            dataType:"html",
            cache:false,
            success:function(a) {
                return pageDownloaded(a, url)
            },
            complete:function() {}
        });
    }
</script>